<template>
  <div class="radio-btn">
    <span v-for="(item,index) in radioList" :key="index"
          class="radio-span"
          :class="{'radio-span-active': value === item.value}"
          @click="updateValue(item.value)">
      {{ item.label }}
    </span>
  </div>
</template>

<script>
export default {
  name: "index",

  props: {
    radioList: Array,
    value: String
  },

  methods: {

    // 改变value的值
    updateValue(val){
      this.$emit('input',val)
    }
  }
}
</script>

<style scoped>
/*按钮组的布局*/
.radio-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
/*按钮的文字大小样式*/
.radio-span{
  min-width: 6em;
  text-align: center;
  border-radius: 16px;
  margin: 0.5em 1em;
  border: #DCDFE6 solid 1px;
  padding: 0.5em;
  background-color: #FAFAFA;
}

/*按钮鼠标悬停样式*/
.radio-span:hover{
  cursor: pointer;
  color: #F56C6C;
  background-color: #FEF0F0;
  border-color: red;
}

/*按钮选中样式*/
.radio-span-active{
  cursor: pointer;
  color: white;
  background-color: #e84949;
}
/*按钮选中之后鼠标悬停样式，不写的话就被上面那个按钮悬停样式覆盖了*/
.radio-span-active:hover{
  cursor: pointer;
  color: white;
  background-color: #e84949;
}
</style>